import React, { useState, useEffect } from 'react';
import { Card, Form, Row, Col, Input, Select, Button, Table, Popconfirm, message, Badge, Divider, DatePicker } from 'antd';
import BreadcrumbBox from '@/components/Base/BreadcrumbBox';
import { withRouter } from 'react-router-dom';
import { formatBalance } from '@/utils/utils';
import { useDebounceFn, useSyncCallback, deepclone } from '@/utils';
import { Storage } from '@/assets/js/storage';
import { TOKEN } from '@/utils/constant'
import moment from 'moment';
import './index.scss';
import { 
  reportPage,
} from '@/api/report'

let orCToken = {}
const FinanceReport = (props) => {
  const [searchForm] = Form.useForm();
  const { RangePicker } = DatePicker;
  // 筛选数据
  const [values] = useState({
    "time": [moment(),moment()],
  })
  // 详情 列表
  const [countDate, setCountDate] = useState('')
  const [initParams, setInitParams] = useState({
    time: [moment(),moment()],
  })
  // 分页
  const [dataSource, setDataSource] = useState([]);
  // 面包屑
  const breadcrumbList = ['报表管理', '分类报表']
  // 布局
  const layout1 = { sm: 24, md: 12, lg: 12, xl: 6, xxl: 6 };
  const labelCol = { sm: 24, md: 8, lg: 8, xl: 8 };
  const wrapperCol = { sm: 24, md: 16, lg: 16, xl: 16 };
  const layoutbtn = { sm: 24, md: 24, lg: 24, xl: 12, xxl: 12 };
  
  const [formData, setFormData] = useState(values)
  let [loading, setLoading] = useState(false)
  // 表单头部
  const columns = [
    {
      title: '支付渠道',
      dataIndex: 'payChannel',
      key: 'payChannel',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '用户类型',
      key: 'userType',
      dataIndex: 'userType',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '交易类型',
      key: 'transType',
      dataIndex: 'transType',
      align: 'center',
      render: (text: string, record: any) => {
        switch (text) {
          case 1:
            return '充值';
            break;
          case 2:
            return '购买';
            break;
          case 3:
            return '提现';
            break;
          case 4:
            return '出售';
            break;
          case 5:
            return '转账';
            break;
          default:
            return '--';
            break;
        }
      },
    },
    {
      title: '交易笔数',
      key: 'transPens',
      dataIndex: 'transPens',
      align: 'center',
      render: (text: any) => text||text===0 ? text : '--',
    },
    {
      title: '金额',
      key: 'amount',
      dataIndex: 'amount',
      align: 'center',
      render: (text: any) => text||text===0 ? text : '--',
    },
    {
      title: '手续费',
      key: 'fee',
      dataIndex: 'fee',
      align: 'center',
      render: (text: any) => text||text===0 ? text : '--',
    },
  ];
  const addAct = (aValue=0,bValue=0) => {
    let sum = 0;
    aValue = aValue.toString()
    bValue = bValue.toString()
    let aLength = aValue.indexOf('.') !== -1 ? aValue.split('.')[1].length : 0;
    let bLength = bValue.indexOf('.') !== -1 ? bValue.split('.')[1].length : 0;
    if(aLength > bLength){
      sum = (parseFloat(aValue) + parseFloat(bValue)).toFixed(aLength)
      console.log(aLength)
    }else{
      sum = (parseFloat(aValue) + parseFloat(bValue)).toFixed(bLength)
    }
    return sum;
  };
  // 提交弹框表单做防抖处理
  const onFinish = async () => {
    let values = deepclone(formData)
    try {
      let params = {
         startDate: moment(values.time[0]).format('YYYY-MM-DD'),
         endDate: moment(values.time[1]).format('YYYY-MM-DD'),
       }
      setLoading(true)
      let res = await reportPage(params, orCToken)
      if(res.code === 0) {
        setDataSource(res.data || [])
      }
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  };
  
  // 等state改变后再执行
  const searchData = useSyncCallback(() => {
    onFinish()
  })
  // 首次更新
  useEffect(() => {
    searchData()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  } , [])
  
  // 初始化
  return (
  <div>
    <div>
      <BreadcrumbBox list={breadcrumbList}></BreadcrumbBox>
      <div className='agent-main'>
        <Form
          initialValues={values} 
          form={searchForm} 
          onFinish={(val) => {
            setFormData(val)
            searchData()
          }}>
          <Card className="formCard" style={{ width: '100%' }} bordered={false}>
            <Row>
              <Col {...layout1}>
                <Form.Item
                  name="time"
                  className="formItem"
                  label="日期范围"
                  labelCol={labelCol}
                  wrapperCol={wrapperCol}
                >
                  <RangePicker allowClear={false} />
                </Form.Item>
              </Col>
              <Col {...layout1}>
                <span className="buttonLeft">
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                  <Button
                    className="reset-btn"
                    type="default"
                    onClick={() => {
                      searchForm.resetFields()
                    }}
                  >
                    重置
                  </Button>
                </span>
              </Col>
            </Row>
          </Card>
        </Form>
        <div className='table-box'>
          <Card>
            <div className='table'>
              <Table
                loading={loading}
                size='middle'
                bordered
                scroll={{ x: 1224 }}
                rowKey={'id'}
                className='antd-table'
                dataSource={dataSource}
                pagination={null}
                columns={columns} />
            </div>
          </Card>
        </div>
      </div>
    </div>
  </div>
  )
}
export default withRouter(FinanceReport)